<template>
  <div class="">
    <table width="1000" border="1" cellspacing="0" height="500">
      <tr style="height:100px">
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
        <th>周六</th>
        <th>周日</th>
      </tr>
      <tr>
        <td v-for="i in 7" :key="i" @click="showMask(i)">
          <ul>
            <li
              v-for="(item, index) in list"
              v-show="item.flag == i"
              :key="index"
            >
              <s v-if="item.status == true">{{ item.title }}</s>
              <span v-else>{{ item.title }}</span>
            </li>
          </ul>
        </td>
      </tr>
    </table>

    <div class="mask" v-show="show">
      <div class="inner">
        <button @click="show = false">关闭</button>
        <h1>周{{ flag }}任务列表</h1>
        <ul>
          <li
            v-for="(item, index) in list"
            :key="index"
            v-show="item.flag == flag"
          >
            <span>{{ item.title }}</span>
            <span v-if="item.status == true">已完成</span>
            <button v-else @click="complate(index)">完成</button>

            <button @click="remove(index)">删除</button>
          </li>
        </ul>

        <footer>
          <input
            type="textarea"
            style="width:500px;height:50px"
            v-model="title"
          />
          <button style="height:50px" @click="add">添加</button>
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: "任务1", status: false, flag: 7 },
        { title: "任务2", status: false, flag: 1 },
        { title: "任务3", status: false, flag: 3 },
        { title: "任务4", status: false, flag: 4 },
        { title: "任务5", status: false, flag: 2 },
        { title: "任务6", status: false, flag: 5 },
        { title: "任务7", status: false, flag: 6 },
      ],
      show: false,
      flag: -1,
      title: "",
    };
  },
  mounted() {},
  methods: {
    showMask(i) {
      this.flag = i;
      this.show = true;
    },
    add() {
      this.list.push({ title: this.title, status: false, flag: this.flag });
      this.title = "";
    },
    complate(index) {
      this.list[index].status = true;
    },
    //点击完成按钮
    remove(i) {
      this.list.splice(i, 1);
    },
  },
  components: {},
};
</script>

<style lang="scss">
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  .inner {
    width: 800px;
    height: 500px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: aliceblue;
    footer {
      position: absolute;
      bottom: 0;
    }
  }
}
</style>
